<template>
    <view class="u-page" style="background-color: #ffffff;">
      <view style="padding: 1vw;position: sticky;top: 30px;z-index: 1;background-color: white;">
        <view class="search-bar">
          <up-form>
            <up-form-item
                label="实验名称："
                labelWidth="auto">
              <up-button type="primary" style="width: 40%" @click="addSylc">新增步骤</up-button>
              <up-button v-if="laborForm.sideTables.length>0" type="primary" style="width: 40%" @click="addLabor">保存</up-button>
            </up-form-item>
            <up-input placeholder="请输入模板名称" v-model="laborForm.experimentName"/>
          </up-form>
        </view>
      </view>
      <up-form-item
          label="实验描述："
          labelWidth="auto"
          style="padding: 1vw;margin-top: 20px">
      </up-form-item>
      <up-textarea style="padding: 1vw;" confirmType="return"  placeholder="请输入内容" v-model="laborForm.experimentDescribe"></up-textarea>
      <up-divider></up-divider>
      <view>
        <up-card v-for="(item,index) in laborForm.sideTables">
          <template #head>

<!--            <view>实验流程{{index+1}}：<a style="color: red;margin-left: 50vw" type="error" @click="deleteFlow(index)">删除</a></view>-->
            <view>步骤{{index+1}}<a style="color: red;margin-left: 60vw;" type="error" @click="deleteFlow(index)">删除</a></view>
          </template>
          <template #body>
            <view class="" slot="body">
              <up-form>
<!--                <up-form-item-->
<!--                    label="流程名称："-->
<!--                    labelWidth="auto">-->
<!--                  <up-input placeholder="请输入流程名称" v-model="item.stepName"/>-->
<!--                </up-form-item>-->
                <up-textarea autoHeight="true" confirmType="return"  placeholder="请输入" v-model="item.stepDescribe"></up-textarea>
              </up-form>
            </view>
          </template>
        </up-card>
        <view>

        </view>
      </view>
    </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import { ref } from 'vue';
import { getTempById,addLaborAPI } from '@/api/system/sysIndex.js'
const tempId = ref('')
const tempObj = ref({})
const laborForm = ref({
  tempId:'',//模板id
  experimentName:'',  //实验名称
  experimentDescribe:'',  //实验描述
  sideTables:[],  //实验子流程表
})

onLoad((options) => {
  tempId.value = options.tempId
  if (options.tempId){
      initTemp()
  }
  console.log(options.tempId)
});

//根据id查询模板
function initTemp(){
  getTempById(tempId.value).then((response) => {
    console.log(response.data)
    tempObj.value = response.data || [];
    laborForm.value.tempId = response.data.id
    laborForm.value.experimentName = response.data.templateName
    laborForm.value.experimentDescribe = response.data.templateDescription
    laborForm.value.sideTables = response.data.sideTables
  });
}

//新增实验流程
function addSylc(){
  const obj = {stepName:'',stepDescribe:''}
  laborForm.value.sideTables.push(obj)
}

//删除流程
function deleteFlow(index){
  laborForm.value.sideTables.splice(index,1)
}

//新建实验计划
function addLabor(){
  if (!laborForm.value.experimentName ){
    uni.showToast({
      title: ' 请填写计划名称！',
      mask: false,
      icon: "none",
    });
    return
  }
  if (laborForm.value.sideTables.length == 0 ){
    uni.showToast({
      title: ' 请添加计划流程！',
      mask: false,
      icon: "none",
    });
    return
  }
  addLaborAPI(laborForm.value)
      .then((response) => {
        uni.showToast({
          title: ' 新增成功！',
          mask: false,
          icon: "success",
        });
        uni.reLaunch({
          url: '/pages/index'
        });
      }).catch((err) => {
    uni.showToast({
      title: err.message,
      mask: false,
      icon: "none",
    });
  })
}

</script>

<style lang="scss" scoped>

</style>
